import React, { Component } from 'react'
import { NavBar, InputItem, Button, Toast } from "antd-mobile";
import { Link } from "react-router-dom";
import { Login } from '../../http/api';
import "../../less/index.less"

export default class login extends Component {
    constructor() {
        super();
        this.state = {
            user: {
                phone: "",
                password: ""
            }
        }
    }
    changeUser(val, key) {
        this.setState({
            user: {
                ...this.state.user,
                [key]: val
            }
        })
    }
    login() {
        //登录请求
        Login(this.state.user).then((res) => {
            //登陆成功
            if (res.data.code === 200) {
                Toast.info(res.data.msg, 1);
                //存储信息
                sessionStorage.setItem("info", JSON.stringify(res.data.list))
                //跳转页面
                this.props.history.push("/index/home")
            }
        })
    }
    render() {
        return (
            <div>
                <NavBar mode="dark">登录</NavBar>

                <InputItem
                    clear
                    placeholder="请输入账号"
                    onChange={(val) => this.changeUser(val, "phone")}
                >
                    账号
                </InputItem>
                <InputItem
                    clear
                    placeholder="请输入密码"
                    onChange={(val) => this.changeUser(val, "password")}
                >
                    密码
                </InputItem>
                <div style={{ width: "33.33%", margin: "10px auto" }}>
                    <Button type="primary" onClick={() => this.login()}>
                        登录
                    </Button>
                </div>
                <Link to="/register/register">去注册</Link>
            </div>
        )
    }
}
